<script type="text/x-template" id="cc-key-value-template">
    <div>
        <template v-if="bulkEdit">
            <el-button
                    size="mini"
                    type="success"
                    @click="handleKeyValueEdit()">Key-Value Edit
            </el-button>
            <el-input
                    type="textarea"
                    :rows="6"
                    placeholder="请输入Key:Value"
                    v-model="keyValueStr"
                    clearable
                    @change="handleChange()"
            >
            </el-input>
        </template>
        <template v-if="keyValueEdit">
            <el-button
                    size="mini"
                    type="success"
                    @click="handleBulkEdit()">Bulk Edit
            </el-button>
            <el-table
                    :data="keyValueList"
                    border
                    style="width: 100%"
                    max-height="180"
            >
                <el-table-column
                        prop="key"
                        label="Key"
                >
                    <template scope="scope">
                        <el-input v-model.trim="scope.row.key"
                                  placeholder="请输入key"
                                  @change="handleCellChange(scope.row.key)"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="Value"
                >
                    <template scope="scope">
                        <el-input v-model.trim="scope.row.value"
                                  placeholder="请输入value"
                                  @change="handleCellChange(scope.row.value)"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label=""
                        fixed="right"
                >
                    <template scope="scope">
                        <el-button v-if="scope.row.key || scope.row.value"
                                   size="mini"
                                   type="danger"
                                   icon="el-icon-error"
                                   @click="handleDelete(scope.$index, scope.row)">
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</script>

<script>
    Vue.component('cc-key-value', {
        template: '#cc-key-value-template',
        data() {
            return {
                bulkEdit: true,
                keyValueEdit: false,
                keyValueStr: '',
                search: '',
                keyValueList: [
                    {
                        key: '',
                        value: ''
                    }
                ]
            }
        },
        props: {
            keyValueList: {
                type: Array
            }
        },
        watch: {
            keyValueList: {
                deep: true,
                handler: function (newVal, oldVal) {
                    var _this = this;
                    if (newVal) {
                        console.log('====watch' + JSON.stringify(newVal));
                        _this.keyValueStr = _this.covertList2Str(newVal)
                    }
                }
            }
        },
        methods: {
            covertList2Str: function (keyValueList) {
                let index = 0;
                let size = keyValueList.length;
                let temp = [];
                for (; index < size; index++) {
                    let keyVal = keyValueList[index];
                    let tempStr = keyVal.key + ":" + keyVal.value;
                    if (tempStr === ':') {
                        continue;
                    }
                    temp.push(tempStr);
                }
                return temp.join("\n")
            },
            covertStr2List: function (keyValueStr) {
                let result = [];
                if (keyValueStr === '') {
                    let temp = {key: '', value: ''};
                    result.push(temp)
                    return result;
                }
                console.log('keyValueStr' + keyValueStr);
                let list = keyValueStr.split("\n");
                console.log('keyValueStr:LIst' + JSON.stringify(list));
                let index = 0;
                let size = list.length;
                for (; index < size; index++) {
                    let pair = list[index];
                    if (pair === '') {
                        continue;
                    }
                    let keyVal = new Array();
                    keyVal = pair.split(":");
                    if (keyVal[0] !== '' || keyVal[1] !== '') {
                        let obj = {};
                        obj.key = keyVal[0];
                        obj.value = keyVal[1];
                        result.push(obj);
                    }
                }
                result = this.getFinalKeyValList(result);
                return result;

            },
            handleChange: function () {
                this.keyValueList = this.covertStr2List(this.keyValueStr);
//                console.log('====handleChange' + JSON.stringify(this.keyValueList));
                this.$emit("change", this.keyValueList);
            },
            handleKeyValueEdit: function () {
                this.bulkEdit = false;
                this.keyValueEdit = true;
            },
            handleBulkEdit: function () {
                this.keyValueEdit = false;
                this.bulkEdit = true;
            },

            handleCellChange: function (changeVal) {
                if (changeVal) {
//                    console.log('====handleCellChange' + JSON.stringify(changeVal));
                    let last = this.keyValueList.pop();
                    this.keyValueList.push(last);
                    if (!(last.key === '' && last.value === '')) {
                        let temp = {key: '', value: ''};
                        this.keyValueList.push(temp);
//                        console.log('====handleCellChange:last' + JSON.stringify(last));
//                        console.log('====handleCellChange:' + JSON.stringify(this.keyValueList));
                    }
                    this.$emit("change", this.keyValueList);
                }
            },

            handleDelete: function (index, row) {
                let length = this.keyValueList.length;
                if (length > 0) {
                    if (index === 0) {
                        this.keyValueList = this.keyValueList.slice(1, length);
                    } else {
                        this.keyValueList = [].concat(this.keyValueList.slice(0, index),this.keyValueList.slice(index+1, length));
                    }
                    this.$emit("change", this.keyValueList);
                }
            }

        },
        created() {
            this.keyValueStr = this.covertList2Str(this.keyValueList);
            this.keyValueList = this.getFinalKeyValList(this.keyValueList);
        }
    })
</script>